<template>
  <div class="posts">
    <!-- 头部 -->
    <header class="posts_header">
      <div class="mask"></div>
      <div class="posts_title">
        <h3>{{essayData.title}}</h3>
      </div>
    </header>

    <!-- 内容 -->
    <main class="posts_main">
      <!-- 粒子特效 -->
      <vue-particles
          color="#fff"
          :particleOpacity="1"
          :particlesNumber="80"
          shapeType="circle"
          :particleSize="5"
          linesColor="#000"
          :linesWidth=".5"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="100"
          :moveSpeed="8"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
          class="particles"
        >
        </vue-particles>
      <!-- 卡片内容 -->
      <div class="posts_content">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <!-- 文章标题 -->
            <div class="box_title">
              <a href="#" style="background:#087de7;color:#fff; padding: 0 10px;" v-text="essayData.title"></a>
              <sapn  style="float: right; padding: 3px 0; color: #3fdb9f;"><i class="el-icon-notebook-2"></i>{{essayData.des}}</sapn>
            </div>
            <!-- 发布日期 -->
            <div class="times">
              <span><i class="el-icon-timer"></i> 发布日期： {{essayData.times | dateFilter}}</span>
            </div>
          </div>
            <!-- 文章内容开始 -->
          <div class="card_content">
            <div class="data_list" v-html="essayData.content">
            <!--显示内容区域-->
            </div>
          </div>
          <p class="mores"><router-link :to="{name: 'frontend'}"> 更多文章 </router-link></p>
        </el-card>
      </div>
    </main>

    <!-- 尾部 -->
    <Footer />
  </div>
</template>

<script>
import Footer from '../footer/Footer'

export default {
  data () {
    return {
      // 文章内容
      essayData: {},
      // 推荐文章
      goodList: []
    }
  },
  methods: {
    // 获取文章数据
    async getData () {
      var id = this.$route.params.userId // 获取路由请求过来的id
      var { data: res } = await this.$http.get('/mores', {
        params: { id: id }
      })
      if (res.meta.status !== 200) return alert('获取文章失败')
      this.essayData = res.data[0]
    },
    // 请求推荐文章
    async handleGood () {
      var { data: res } = await this.$http.get('/more', {
        params: {
          pagenum: 0,
          pagesize: 6
        }
      })
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.goodList = res.data.mores
    },
    // 滚动事件
    handleScoll () {
      var top = document.documentElement.scrollTop
      var pages = document.querySelector('.pages')
      if (top >= 230) {
        pages.style.position = 'fixed'
        pages.style.top = 78 + 'px'
      } else {
        pages.style.position = 'absolute'
        pages.style.top = -60 + 'px'
      }
    },
    // 获取单个文章
    handleId (val) {
      this.essayData = val
      document.documentElement.scrollTop = 0
      var id = val.id
      // history.pushState(null, null, '/#/posts/' + id)
      window.location.hash = '/posts/' + id
    }
  },
  created () {
    this.getData()
    this.handleGood()
  },
  mounted () {
    // 监听滚动事件
    // document.addEventListener('scroll', this.handleScoll)
  },
  beforeDestroy () {
    // document.removeEventListener('scroll', this.handleScoll)
    // history.pushState(null, null, '/')
  },
  components: {
    Footer
  }
}
</script>

<style lang="less" scoped>
  .posts{
    min-height: 100%;
    width: 100%;
    font-size: 15px;
  }
  .posts_header{
    position: relative;
    display: flex;
    height: 375px;
    width: 100%;
    background: url('//s1.ax1x.com/2020/05/24/YzrUXj.jpg') top;
    background-size: cover;
    z-index: 2;
    .posts_title{
      width: 1200px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      color: #fff;
      font-size: 30px;
      z-index: 4;
      text-align: center;
      h3{
      font-weight: 200;
      }
    }
  }
  .mask{
    width:100%;
    height: 375px;
    position:absolute;
    background-color: #3d4f83;
    top:0;
    left:0;
    z-index:3;
    opacity:0.6;
  }
  .posts_main{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #f0eef5;
    .particles{
      width: 100%;
      min-height: 100%;
      position: fixed;
      top: 0;
      left: 0;
    }
    .posts_content{
      width: 90%;
      max-width: 900px;
      margin-left: 120px;
      position: relative;
      z-index: 3;
    }
    .box-card{
      position: relative;
      top: -60px;
      min-height: 441px;
      width: 1200px;
    }
  }
  .clearfix{
    a{
      display: inline-block;
      height: 24px;
      line-height: 24px;
      min-width: 120px;
      text-align: center;
      color: #42b983;
      border-radius: 15px;
    }
  }
  .times{
    margin-top: 30px;
    color: #606c89;
    span{
      padding-left:40px;
    }
  }
  .out{
    margin-left: 400px;
    color: royalblue !important;
    width: 50px  !important;
  }
  .mores {
    margin-top: 20px;
    text-align: right;
  }
  .mores a{
    padding-right: 66px;
    color: #1186f4;
    text-decoration: underline;
    font-size: 13px;
  }
  .box_title{
    overflow: hidden;
  }
  .data_list{
    padding-left: 10px;
  }
@media screen and (min-width: 1100px) and  (max-width:1400px)  {
    .box-card{
      width: 1000px !important;
    }
}
@media screen and (min-width: 0) and  (max-width:1100px)  {
    .box-card{
      width: 100% !important;
    }
    .posts_content{
      margin-left: 40px !important;
    }
}
</style>
